<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>主界面</title>
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyui/easyloader.js"></script>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"  href="/easyui/themes/default/easyui.css">
</head>
<body >
<div class="easyui-panel" title=""  data-options="border:true">


    <table id="dg" class="easyui-datagrid" title="属性列表"
           data-options="singleSelect:true,method:'get' ,toolbar:'#tb'">
        <thead>
        <tr>
            <th data-options="field:'id'" width="20%">属性id </th>
            <th data-options="field:'attrName'" width="80%">属性名</th>
          </tr>
        </thead>
    </table>
    <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addAttrInfo()">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editAttrInfo()">编辑</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        </div>
        <div>
            一级分类：
            <select id="ctg1ForAttrList"   class="easyui-combobox"   style="width:100px" data-options="valueField:'id',textField:'name',url:'getCatalog1',
            onSelect:function(rec){
            $('#ctg2ForAttrList').combobox('clear');
            $('#ctg3ForAttrList').combobox('clear');
                    $('#ctg2ForAttrList').combobox('reload','getCatalog2?catalog1Id='+rec.id);
               }"  ></select>
            二级分类：
            <select name="ctg2ForAttrList" id="ctg2ForAttrList"  class="easyui-combobox" data-options="valueField:'id',textField:'name',
           onSelect:function(rec){
            $('#ctg3ForAttrList').combobox('clear');
                    $('#ctg3ForAttrList').combobox('reload','getCatalog3?catalog2Id='+rec.id);
               }"    style="width:100px" ></select>
            三级分类：
            <select name="ctg3ForAttrList" id="ctg3ForAttrList"  class="easyui-combobox" data-options="valueField:'id',textField:'name',
            onSelect:function(rec){
                   $('#dg').datagrid({url:'attrInfoList?catalog3Id='+rec.id});
               }
"    style="width:100px" ></select>
               <a href="#" class="easyui-linkbutton" iconCls="icon-search"  onclick="javascript:reloadAttrList()"  >刷新属性列表</a>

        </div>
    </div>
</div>

<div id="dlg" class="easyui-dialog" title="编辑属性" style="width:600px;height:500px;"
    closed="true"  data-options="iconCls:'icon-save',resizable:true,modal:false" buttons="#bb" >
    <form id="attrForm">
        <br/>
        <label>属性名称:</label>
         <input  id="attrName" name="attrName" class="easyui-textbox" data-options="" style="width:100px"/>
         <input  id="attrId" name="attrId" type="hidden"  />
         <br/><br/>
         <table id="dg_av" class="easyui-datagrid" title="属性值列表(双击单元格可直接编辑）"></table>

    </form>
</div>

<div id="bb">
    <a href="#" class="easyui-linkbutton" onclick="saveAttr()">保存</a>
    <a href="#" class="easyui-linkbutton">关闭</a>
</div>

</body>
<script language="javascript">
    /*<![CDATA[*/
    function saveAttr(){
        var attrJson ={} ;
        //把表格中的数据循环组合成json
        var attrValueRows= $("#dg_av").datagrid('getRows') ;
        for (var i = 0; i < attrValueRows.length; i++) {
            //技巧：与bean中的属性同名可以借助springmvc直接注入到实体bean中，即使是list也可以。
            attrJson["attrValueList["+i+"].id"]=attrValueRows[i].id;
            attrJson["attrValueList["+i+"].valueName"]=attrValueRows[i].valueName;
        }

        attrJson["attrName"]=$("#attrName").val();
        attrJson["id"]=$("#attrId").val();
        attrJson["catalog3Id"]=$("#ctg3ForAttrList").combobox('getValue');

        //ajax 保存到后台
        $.post("saveAttrInfo",attrJson,function(data){
            $("#dlg").dialog("close");
            $("#dg").datagrid("reload");
        })
    }

    function reloadAttrList(){
        var ctg3val=$("#ctg3ForAttrList").combobox('getValue');
        $('#dg').datagrid({url:'attrInfoList?catalog3Id='+ctg3val});
    }


    function addAttrInfo(){
        if(!checkBeforeDialog()){
            return ;
        }
        //弹出框
        $("#dlg").dialog("open");
       //进系统前先清空
        $("#attrId").val("");
        $("#attrName").textbox('clear');
        $('#dg_av').datagrid({url:''});
        // 初始化datagrid
        initAttrValueDatagrid();


    }

    function editAttrInfo(){
        if(!checkBeforeDialog()){
            return ;
        }
        //弹出框
        $("#dlg").dialog("open");
        // 初始化datagrid
        initAttrValueDatagrid();
        //进页面前先加载数据
        var attrInfoRow=$("#dg").datagrid('getSelected');
        $('#dg_av').datagrid({url:'getAttrValueList?attrId='+attrInfoRow.id});
        $("#attrId").val(attrInfoRow.id);
        $("#attrName").textbox('setValue',attrInfoRow.attrName);


    }

    function checkBeforeDialog(){
        var ctg3val = $("#ctg3ForAttrList").combobox('getValue');
        if(ctg3val==''){
            $.messager.alert('警告','请先选择三级分类','warning');
            return false;
        }
        return true;
    }


    function initAttrValueDatagrid(){

            $('#dg_av').datagrid('loadData', { total: 0, rows: [] });
            datagrid = $("#dg_av").datagrid({
                 columns:[[
                     { field:'id',title:'编号',width:'20%'},
                     { field:'valueName',title:'属性值名称',width:'80%',
                        editor: {
                            type: 'validatebox', options: { required: true}  //必填项
                        }
                     }
                 ]],
                toolbar:[{text:'添加',iconCls:'icon-add',
                    handler:function () {
                         datagrid.datagrid('appendRow',{id:'',valueName:''});
                    }
                },'-',
                    {text:'删除',iconCls:'icon-remove',
                       handler:function () {
                           var row = datagrid.datagrid('getSelected');
                           if (row) {
                               var rowIndex = datagrid.datagrid('getRowIndex', row);
                               datagrid.datagrid('deleteRow', rowIndex);
                           }
                       }
                    }],
                onDblClickRow: function (rowIndex, rowData) {
                    //双击开启编辑行
                        datagrid.datagrid("beginEdit", rowIndex);
                        //设定当失去焦点时,退出编辑状态
                        var valueName = rowData.valueName;
                        $("input.datagrid-editable-input").val(valueName).bind("blur",function(evt){
                            datagrid.datagrid('endEdit',rowIndex);
                        });
                }
            });
    }

    /*]]>*/
</script>

</html>